<template>
    <div class="gjqy wzxx">
        <div class="fontGjqy">
            <span style="padding: 14px 0 0px 0">物资信息{{TableShow?"":`/${tyclId?"编辑":"添加"}数据`}}</span>
        </div>
        <div class="redwTable" v-if="TableShow">
            <div class="buttonBox">
                <el-button
                        style="margin-right: 10px"
                        class="btnDefault"
                        @click="showTYCLSelect"
                >添加数据
                </el-button>
                <el-button class="btnDefault" @click="DelectSelectRow">批量删除</el-button>
            </div>
            <div class="right_one_body table" >
                <el-table
                        :data="sliceData"
                        border
                        highlight-current-row
                        style="width: 100%"
                        @selection-change="selectionChange"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="wzmc" label="物资名称"></el-table-column>
                    <el-table-column prop="wzlxmc" label="物资类型" width="280"></el-table-column>
                    <el-table-column prop="wzsyflmc" label="使用分类"></el-table-column>
                    <el-table-column prop="wzsl" label="数量"></el-table-column>
                    <el-table-column prop="sccj" label="生产厂家"></el-table-column>
                    <el-table-column prop="cjlxdh" label="联系电话"></el-table-column>
                    <el-table-column prop="zrj" label="总容积(立方米)"></el-table-column>
                    <el-table-column prop label="操作" width="100">
                        <template slot-scope="scope">
              <span @click="editTYCL(scope.row)" class="cursor">
                <img src="../../assets/image/sjlr/编辑_on.png"/>
              </span>
                            <span
                                    @click.prevent="DelectRow(scope.row)"
                                    class="normalColor cursor"
                            >
                <img src="../../assets/image/sjlr/删除_on.png" alt/>
              </span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <pages :page="page" @changePage="changePage1"></pages>
                </div>
            </div>
        </div>
        <div class="gjqyDetailAdd" v-if="!TableShow">
            <el-form ref="form" :model="form" label-width="180px" style="height: 100%">
                <div class=" txsxstyle">
                    <span class="style_title">基本信息</span>
                    <div class="txsxstyle_box">
                        <div class="formBox">
                            <el-form-item
                                    v-for="(item, index) in form.jbsxArr"
                                    :label="item.sxmc"
                                    :key="index"
                                    :prop="'jbsxArr.' + index + '.sxvalue'"
                                    :rules="checkRules(item)"
                            >
                                <el-input
                                        class="noBg border1"
                                        v-show="item.sxlx == 0 || item.sxlx == 4 || item.sxlx == 5|| item.sxlx == 8"
                                        style="width: 440px;"
                                        v-model="item.sxvalue"
                                ></el-input>
                                <el-select
                                        class="noBg border1"
                                        style="width: 440px;"
                                        v-model="item.sxvalue"
                                        v-show="item.sxlx == 1"
                                        placeholder="请选择"
                                >
                                    <el-option
                                            v-for="option in item.selectOption"
                                            :key="option.zdID"
                                            :label="option.zdmc"
                                            :value="option.zdID"
                                    ></el-option>
                                </el-select>

                                <el-date-picker
                                        class="noBg border1"
                                        style="width: 440px;"
                                        v-model="item.sxvalue"
                                        v-show="item.sxlx == 2"
                                        type="datetime"
                                        format="yyyy-MM-dd HH:mm:ss"
                                        value-format="timestamp"
                                        placeholder="选择日期"
                                ></el-date-picker>
                            </el-form-item>
                        </div>
                    </div>
                </div>
            </el-form>

            <div class="textRight mt20">
                <el-button
                        class="btnDefault"
                        @click="submitTYCLSelect"
                >保存
                </el-button>
                <el-button
                        class="btnDefault"
                        @click="backList"
                >取消
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
  import "../../assets/css/global.css";
  import pages from "../base/pages";
  import { baseServe } from "../../request/api";

  export default {
    name: "gjqy",
    data() {
      return {
        form: {
          jbsxArr: [
            {"sxvalue": "", "sxID": "wzmc", "sxmc": "物资名称", "sxlx": "0", "description": null, "sxzd": "wzmc", "isbt": "1" },
            {"sxvalue": "", "sxID": "wzlx", "sxmc": "物资类型", "sxlx": "1","selectOption":[{zdmc:'防疫用品',zdID:'30001'},{zdmc:'卫生防疫',zdID:'30002'},{zdmc:'防护服（衣、帽、鞋、手套、眼镜）',zdID:'30003'},{zdmc:'测温计（仪）',zdID:'30004'},{zdmc:'化学放射污染',zdID:'30005'},{zdmc:'防毒面具',zdID:'30006'},{zdmc:'重型防化服',zdID:'30007'},{zdmc:'轻型防化服',zdID:'30008'},{zdmc:'消防',zdID:'30009'},{zdmc:'防火服',zdID:'30010'},{zdmc:'头盔',zdID:'30011'},{zdmc:'手套',zdID:'30012'},{zdmc:'面具',zdID:'30013'},{zdmc:'消防靴',zdID:'30014'},{zdmc:'海滩',zdID:'30015'},{zdmc:'潜水服（衣）',zdID:'30016'},{zdmc:'水下呼吸器',zdID:'30017'},{zdmc:'爆炸',zdID:'30018'},{zdmc:'防爆服',zdID:'30019'},{zdmc:'防暴',zdID:'30020'},{zdmc:'盾牌',zdID:'30021'},{zdmc:'盔甲',zdID:'30022'},{zdmc:'通用',zdID:'30023'},{zdmc:'安全帽（头盔）',zdID:'30024'},{zdmc:'安全鞋',zdID:'30025'},{zdmc:'水靴',zdID:'30026'},{zdmc:'呼吸面具',zdID:'30027'}],"description": null, "sxzd": "wzlx", "isbt": "1" },
            {"sxvalue": "", "sxID": "wzsyfl", "sxmc": "物资使用", "sxlx": "1","selectOption":[{zdmc:'生产用物资',zdID:'10201'},{zdmc:'维修建设用物资',zdID:'10202'},{zdmc:'基本建设用物资',zdID:'10203'},{zdmc:'科学研究用物资',zdID:'10204'},{zdmc:'工艺装备用物资',zdID:'10205'},{zdmc:'其他',zdID:'10206'}], "description": null, "sxzd": "wzsyfl", "isbt": "1" },
            {"sxvalue": "", "sxID": "wzsl", "sxmc": "物资数量（个）", "sxlx": "4", "description": null, "sxzd": "wzsl", "isbt": "1" },
            {"sxvalue": "", "sxID": "zrj", "sxmc": "总容量（立方米）", "sxlx": "5", "description": null, "sxzd": "zrj", "isbt": "1" },
            {"sxvalue": "", "sxID": "sccj", "sxmc": "生产厂家", "sxlx": "0", "description": null, "sxzd": "sccj", "isbt": "0" },
            {"sxvalue": "", "sxID": "cjlxr", "sxmc": "厂家联系人", "sxlx": "0", "description": null, "sxzd": "cjlxr", "isbt": "0" },
            {"sxvalue": "", "sxID": "cjlxdh", "sxmc": "厂家联系电话", "sxlx": "8", "description": null, "sxzd": "cjlxdh", "isbt": "0" },
            {"sxvalue": "", "sxID": "bz", "sxmc": "备注", "sxlx": "0", "description": null, "sxzd": "bz", "isbt": "0" },
          ]
        },
        TableShow: true,
        page: {
          //总条数
          total: 0,
          //每页条数
          limit: 10,
          //当前页数
          currentPage: 1,
          pageSizes: [5, 10]
        },
        tableData: [],
        sliceData: [],
        selectRowArr: []
      };
    },
    mounted() {
      this.getTableByType();
    },
    computed: {
      zyjjmbId() {
        return this.$store.state.zyjjmbId;
      },
      tyclId() {
        return this.$store.state.detailTypeId;
      }
    },
    methods: {
      DelectRow(row) {
        this.$confirm("此操作将删除该项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            baseServe.deletewzxx({ wzxxID: row.wzxxid }).then(() => {
              this.getTableByType();
              this.$message({ type: "success", message: "删除成功" });
            });
          });
      },
      DelectSelectRow() {
        let arr = [];
        for (let i = 0; i < this.selectRowArr.length; i++) {
          let target = this.selectRowArr[i].wzxxid;
          arr.push(target);
        }
        if(arr.length==0){
          this.$message({ type: "warning", message: "请先勾选需要删除的数据" });
          return
        }
        this.$confirm("此操作将批量删除选择项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            baseServe.deletewzxx({ wzxxID: arr.join(",") }).then(() => {
              this.getTableByType();
              this.$message({ type: "success", message: "删除成功" });
            });
          });
      },
      selectionChange(val) {
        this.selectRowArr = val;
      },
      //判断校验规则
      checkRules(item) {
        let arr = [];
        if (item.isbt == "1") {
          arr.push({ required: true, message: "必填字段", trigger: "blur" });
        }
        if (item.sxlx == 4) {
          arr.push({ validator: this.checkNum, trigger: "blur" });
        }
        if (item.sxlx == 5) {
          arr.push({ validator: this.checkNumber, trigger: "blur" });
          arr.push({ validator: this.checkUnitNumber, trigger: "blur" });
        }
        if (item.sxlx == 8) {
          arr.push({ validator: this.checkMobile, trigger: "blur" });
        }
        return arr;
      },
      //编辑时提示单位
      getZyjjmbsxValue() {
        baseServe.setZyjjmbSX({ zyjjmbID: this.zyjjmbId }).then(res => {
          if (res.data.baseZyjjmbModel) {
            let jbsxArrClone = this.form.jbsxArr;
            this.form.treeValue = res.data.baseZyjjmbModel.rfdwnm;
            jbsxArrClone.map((v) => {
              for (let k in res.data.baseZyjjmbModel) {
                if (k == v.sxzd) {
                  v.sxvalue = res.data.baseZyjjmbModel[k];
                  if (v.sxlx == 2 && v.sxvalue) {
                    v.sxvalue = new Date(v.sxvalue).getTime();
                  }
                }
              }
            });
            if (res.data.baseZyjjmbModel.traitAttributeInfo && res.data.baseZyjjmbModel.traitAttributeInfo.length > 0) {
              this.form.gxsxArr.map((v) => {
                res.data.baseZyjjmbModel.traitAttributeInfo.map(k => {
                  if (k.sxbsxid == v.sxID) {
                    v.sxvalue = k.sxvalue;
                  }
                });
              });
            }

          }
        });
      },
      getTYCLsxValue() {
        baseServe.searchOneInfo({
          queryType: "wzxx",
          lxId: this.tyclId
        }).then(res => {
          if (res.data.wzxxModel) {
            let jbsxArrClone =this.form.jbsxArr;
            jbsxArrClone.map((v) => {
              for (let k in res.data.wzxxModel) {
                if (k == v.sxzd) {
                  v.sxvalue = res.data.wzxxModel[k];
                }
              }
            });
          }
        });
      },
      //提交
      submitTYCLSelect() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            let params = {};
            this.form.jbsxArr.map(v => {
              if (v.sxzd) {
                params[v.sxzd] = v.sxvalue;
              }
            });
            params.zyjjmbid = this.zyjjmbId;
            if (this.tyclId) {
              params.wzxxid = this.tyclId;
            }
            baseServe.updatewzxx(params).then(() => {
              this.getTableByType();
              this.showTYCLSelect();
              this.TableShow = true;
              this.$message({ type: "success", message: "保存成功" });
            });
          } else {
            this.$message({ type: "warning", message: "请按照规则填写选项" });
            return false;
          }
        });

      },
      //返回
      backList() {
        this.showTYCLSelect();
        this.TableShow = true;
      },
      //新增
      showTYCLSelect() {
        this.$store.state.detailTypeId = "";
        this.TableShow = false;
        this.form. jbsxArr= [
          {"sxvalue": "", "sxID": "wzmc", "sxmc": "物资名称", "sxlx": "0", "description": null, "sxzd": "wzmc", "isbt": "1" },
          {"sxvalue": "", "sxID": "wzlx", "sxmc": "物资类型", "sxlx": "1","selectOption":[{zdmc:'防疫用品',zdID:'30001'},{zdmc:'卫生防疫',zdID:'30002'},{zdmc:'防护服（衣、帽、鞋、手套、眼镜）',zdID:'30003'},{zdmc:'测温计（仪）',zdID:'30004'},{zdmc:'化学放射污染',zdID:'30005'},{zdmc:'防毒面具',zdID:'30006'},{zdmc:'重型防化服',zdID:'30007'},{zdmc:'轻型防化服',zdID:'30008'},{zdmc:'消防',zdID:'30009'},{zdmc:'防火服',zdID:'30010'},{zdmc:'头盔',zdID:'30011'},{zdmc:'手套',zdID:'30012'},{zdmc:'面具',zdID:'30013'},{zdmc:'消防靴',zdID:'30014'},{zdmc:'海滩',zdID:'30015'},{zdmc:'潜水服（衣）',zdID:'30016'},{zdmc:'水下呼吸器',zdID:'30017'},{zdmc:'爆炸',zdID:'30018'},{zdmc:'防爆服',zdID:'30019'},{zdmc:'防暴',zdID:'30020'},{zdmc:'盾牌',zdID:'30021'},{zdmc:'盔甲',zdID:'30022'},{zdmc:'通用',zdID:'30023'},{zdmc:'安全帽（头盔）',zdID:'30024'},{zdmc:'安全鞋',zdID:'30025'},{zdmc:'水靴',zdID:'30026'},{zdmc:'呼吸面具',zdID:'30027'}],"description": null, "sxzd": "wzlx", "isbt": "1" },
          {"sxvalue": "", "sxID": "wzsyfl", "sxmc": "使用分类", "sxlx": "1","selectOption":[{zdmc:'生产用物资',zdID:'10201'},{zdmc:'维修技措用物资',zdID:'10202'},{zdmc:'基本建设用物资',zdID:'10203'},{zdmc:'科学研究用物资',zdID:'10204'},{zdmc:'工艺装备用物资',zdID:'10205'},{zdmc:'其他',zdID:'10206'}], "description": null, "sxzd": "wzsyfl", "isbt": "1" },
          {"sxvalue": "", "sxID": "wzsl", "sxmc": "数量（个）", "sxlx": "4", "description": null, "sxzd": "wzsl", "isbt": "1" },
          {"sxvalue": "", "sxID": "zrj", "sxmc": "总容量（立方米）", "sxlx": "5", "description": null, "sxzd": "zrj", "isbt": "1" },
          {"sxvalue": "", "sxID": "sccj", "sxmc": "生产厂家", "sxlx": "0", "description": null, "sxzd": "sccj", "isbt": "0" },
          {"sxvalue": "", "sxID": "cjlxr", "sxmc": "联系人", "sxlx": "0", "description": null, "sxzd": "cjlxr", "isbt": "0" },
          {"sxvalue": "", "sxID": "cjlxdh", "sxmc": "联系电话", "sxlx": "8", "description": null, "sxzd": "cjlxdh", "isbt": "0" },
          {"sxvalue": "", "sxID": "cjsj", "sxmc": "采集时间", "sxlx": "2", "description": null, "sxzd": "cjsj", "isbt": "0" },
          {"sxvalue": "", "sxID": "gxsj", "sxmc": "更新时间", "sxlx": "2", "description": null, "sxzd": "gxsj", "isbt": "0" },
          {"sxvalue": "", "sxID": "bz", "sxmc": "备注", "sxlx": "0", "description": null, "sxzd": "bz", "isbt": "0" },
        ]
      },
      //编辑
      editTYCL(row) {
        this.$store.state.detailTypeId = row.wzxxid;
        if (this.tyclId) {
          this.TableShow = false;
          this.getTYCLsxValue();
        }
      },
      //获取表格
      getTableByType() {
        baseServe
          .getGjqyTable({
            queryType: "wzzb",
            zyjjmbId: this.zyjjmbId
          })
          .then(res => {
            if (res.data.wzzbInfo && res.data.wzzbInfo.wzxxInfos) {
              this.tableData = res.data.wzzbInfo.wzxxInfos;
              this.page.total = this.tableData.length;
              this.page.currentPage=1
              this.pages();
            }
          });
      },
      //前台分页
      pages() {
        this.page.total = this.tableData.length;
        if (!this.page.total % this.page.limit) {
          this.page.currentPage = this.page.currentPage - 1;
        }
        let begin = (this.page.currentPage - 1) * this.page.limit;
        let end = this.page.currentPage * this.page.limit;
        this.sliceData = this.tableData.slice(begin, end);
      },
      changePage1(data) {
        this.page = data;
        this.pages();
      }
    },
    components: {
      pages
    }
  };
</script>

<style lang="less" scoped>
    .wzxx {
        .redwTable{
            height: calc(100% - 100px);

        }
        .gjqyDetailAdd .txsxstyle {
            height: 100%;
        }
    }
</style>
